<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue/vue.js"></script>
</head>
<style>
   
</style>

<body>
    <div id="app">
        <table border="1px">
            <thead>
                <th> 订单日期</th>
                <th>状态</th>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{item.time}}</td>
                    <td :style="activation(item.status)">{{item.status}}</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                list: [
                    {
                        time: "2019-11-20",
                        status: "待审核"

                    },
                    {
                        time: "2018-11-20",
                        status: "审核通过"
                    },
                    {
                        time: "2022-03-20",
                        status: "未通过"
                    }
                ],
                
            }


        },

        computed: {
            activation() {
                return (status) => {// 使用JavaScript闭包，进行传值操作
                    if (status === "待审核") {
                        return { 'color': 'blue' }
                    } else if (status === "审核通过") {
                        return { 'color': 'green' }
                    } else {
                        return { 'color': 'red' }
                    }
                }

            }



          
        }





    })
</script>

</html>